<template>
  <div class="dashboard-container">
    <div class="app-container">
      <div class="shadow">
        <el-row style="height: 60px; margin-top: 15px">
          <!-- type：设置按钮类型
              size: 设置按钮大小 -->
          <el-button
            type="primary"
            size="small"
            class="mar"
            @click="addFn"
          >新增分类</el-button>
          <el-input v-model="input" placeholder="请输入内容">
            <el-button slot="append" icon="el-icon-search" class="measure" @click="findFn" />
          </el-input>
        </el-row>
        <hr>
        <el-table :ref="form" :data="tableData" style="width: 100%" border row-key="id">
          <el-table-column label="图片" width="400" prop="image" align="center">
            <template v-slot="{row}" align="center">
              <img :src="row.image">
            </template>
          </el-table-column>
          <el-table-column label="标题" width="400" prop="title" align="center" />
          <el-table-column label="介绍" width="400" prop="desc" align="center" />
          <el-table-column label="操作" align="center">
            <template v-slot="{row}">
              <el-button
                size="mini"
                type="primary"
                @click="updateFn(row.id)"
              >编辑</el-button>
              <el-button
                size="mini"
                type="danger"
                @click="delFn(row.id)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <hr>
        <el-row type="flex" justify="center" align="middle" style="height: 60px">
          <el-pagination
            height="200"
            background
            :page-size="size"
            layout="prev, pager, next"
            :total="total"
            @current-change="changePage"
          />
        </el-row>
        <newly ref="uploadpictures" :show-dialog.sync="showDialog" :form-data="form" />
      </div>
    </div>
  </div>
</template>

<script>
import { getCategoryListings, delClassify, updateClassify, quanClassify, findClassify } from '@/api/category'
import newly from '@/views/fenlei/newly.vue'
export default {
  components: { newly },
  data() {
    return {
      input: '',
      form: {
        desc: '',
        image: '',
        title: ''
      },
      tableData: [],
      page: 0,
      size: 4,
      pagesize: 4,
      total: 0,
      showDialog: false
    }
  },
  async created() {
    await this.getCategoryListings()
  },
  mounted() {
  },
  methods: {
    async getCategoryListings() {
      const res = await getCategoryListings(this.size, this.page)
      this.tableData = res
      const ret = await quanClassify()
      this.total = ret
      console.log(89, ret)
    },
    changePage(page) {
      // console.log(65, page)
      // page: 表示获取到当前点击的页码数
      this.page = page
      this.getCategoryListings()
    },
    addFn() {
      this.showDialog = true
    },
    async updateFn(id) {
      this.showDialog = true
      console.log(id)
      const res = await updateClassify(id)
      this.form = res
      console.log('编辑回显', this.form)
      this.$refs.uploadpictures.uploadImgView(this.form)
    },
    async findFn() {
      if (this.input != '') {
        await getCategoryListings(this.limit, this.page, this.input)
        const res = await findClassify(this.input)
        this.tableData = res
        console.log(114, res)
      } else {
        this.$message('请输入内容！')
        this.input = ''
      }
    },
    delFn(id) {
      this.$confirm('是否确定删除？', '删除', {
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        type: 'warning'
      }).then(async() => {
        // 调用接口
        await delClassify(id)
        // 更新列表
        await this.getCategoryListings()
        // 提示
        this.$message.success('删除成功！')
      }).catch(() => {
        console.log('取消删除')
      })
    }
  }
}

</script>

<style lang=scss scoped>
.shadow {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 10px;
}
.el-input {
  width: 500px;
}
.mar {
  float: left;
  margin-left: 10px;
  margin-top: 10px;
}
.el-input {
  float: right;
  margin-top: 10px;
  margin-right: 50px;
}
hr.style-two {
  border: 0;
  height: 1px;
  background-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0.75),
    rgba(0, 0, 0, 0)
  );
}
.el-table {
  line-height: 5px;
}
img{
  height: 100px;
}

</style>
